<template>
    <div>
        <header-top></header-top>
        <el-container style="margin-top: 15px">
            <div class="custonger-tip flex">            
                <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <el-row>
                    <el-button type="warning">删除</el-button>
                    <el-button type="primary" @click="addCustomer = true">新增</el-button>
                </el-row>
            </div>

            <!-- 增加客户bg -->
            <el-dialog
                title=""
                :visible.sync="addCustomer"
                width="30%"
                :before-close="UserClose">
                <span>这是一段信息</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addCustomer = false">取 消</el-button>
                    <el-button type="primary" @click="addCustomer = false">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 增加客户end -->

            <el-table
            ref="multipleTable"
                :data="tableData"
                border
                tooltip-effect="dark"
                style="width: 100%;"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name[0].text"
                    label="公司名称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="address[0].text"
                    label="公司地址"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="brand[0].text"
                    label="公寓品牌"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="scale[0].text"
                    label="公寓规模"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="pattern[0].text"
                    label="模式"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="contacts[0].text"
                    label="联系人"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="contactInfo[0].text"
                    label="联系方式"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="businessLicense"
                    label="营业执照"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="state"
                    label="状态"
                    align="center">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small"><i class="icon iconfont icon-htmal5icon16" style="color:#000;"></i></el-button>
                        <el-button type="text" size="small"><i class="icon iconfont icon-shanchu" style="color:#000;"></i></el-button>
                    </template>
                </el-table-column>
            </el-table>            

            <!-- 编辑客户bg -->
            <el-card class="box-card" v-show="isShowEdit">
                <div v-for="editItem in editCont" :key="editItem" :value="editItem" class="text item">
                    {{ editItem.name +':'+ editItem.text }}
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary">确定</el-button>
                    <el-button type="warning">删除</el-button>
                </span>
            </el-card>
            <!-- 编辑客户end -->
        </el-container>
    </div>
</template>

<script>
    import headerTop from './../com/headerTop.vue'
    export default {
        data() {
            return {
                input5         : "",
                addCustomer    : false,
                tableData      : [{
                    name            : [{name:"公司名称", text: "公司名称"}],
                    address         : [{name:"公司地址", text: "西安市高新二路创业大厦"}],
                    brand           : [{name:"公寓品牌", text: "橘子公寓"}],
                    scale           : [{name:"公寓规模", text: "80间"}],
                    pattern         : [{name:"模式", text: "集中式"}],
                    contacts        : [{name:"联系人", text: "韩云锋"}],
                    contactInfo     : [{name:"联系方式", text: "17793415651"}],
                    businessLicense : "查看",
                    state           : "正常"
                }, {
                    name            : [{name:"公司名称", text: "梵响数据"}],
                    address         : [{name:"公司地址", text:"西安市高新二路创业大厦"}],
                    brand           : [{name:"公寓品牌", text:"橘子公寓"}],
                    scale           : [{name:"公寓规模", text:"880间"}],
                    pattern         : [{name:"模式", text:"集中式"}],
                    contacts        : [{name:"联系人", text:"韩云锋"}],
                    contactInfo     : [{name:"联系方式", text:"17793415651"}],
                    businessLicense : "查看",
                    state           : "正常"
                }],
                multipleSe : [],
                editCont   : [],
                isShowEdit : false
            }
        },
        components: {
            headerTop : headerTop
        },
        computed:{

        },
        methods:{
            /*表格*/
            handleSelectionChange(val) {
                this.multipleSe = val;
            },

            /*关闭增加用户*/
            UserClose(done) { 
                this.$confirm('确认关闭？')
                  .then(_ => {
                    done();
                  })
                  .catch(_ => {});
            },

            /*点击编辑*/
            handleEdit(row) {
                var rowList = [];
                for(var i in row){
                    if(row[i][0].name){
                        rowList.push(row[i][0]);
                    }
                }
                rowList.push({name:"公寓简介",text:""});
                this.editCont = rowList;
                this.isShowEdit = !this.isShowEdit;
                // console.log(row);
            }
        },
    }
</script>

<style scoped>
  .custonger-tip{
    
  }
</style>